<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%@ page language="java" contentType="text/html;  charset=utf-8"
	pageEncoding="utf-8"%>
<!DOCTYPE html>
<html lang="ko">
	<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <!-- <link rel="shortcut icon" href=""> -->

    <title>고객센터</title>

    <!-- Bootstrap core CSS -->
    <link href="/resources/css/bootstrap.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    	<script src="/resources/js/html5shiv.js"></script>
    	<script src="/resources/js/respond.min.js"></script>
    <![endif]-->
    <link href='http://fonts.googleapis.com/css?family=Alef' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="/resources/css/font-awesome.css">
    <link rel="stylesheet" href="http://fonts.googleapis.com/earlyaccess/nanumgothic.css">
    <style type="text/css">
    	body {
			font-family:"나눔고딕",NanumGothic,"맑은 고딕","Malgun Gothic","Apple SD Gothic Neo","돋움",dotum,Arial,sans-serif;
			font-size:14px;
			line-height:1.428571429;
			color:#333;
			background-image: url("/resources/img/bg.gif");
		}
    	.search-wrap{
    		width: 100%;
    		height: 210px;
    		background-image: url("/resources/img/search-wrap-Backgrounds.jpg");
    		margin-top: 0;
    		overflow: hidden;
    	}
    	.search-form{
   			width: 60%;
   			margin: -40px auto;
   			position: relative;
   			border-radius: 24px;
   			height: 50px;
   			padding: 12px 18px;
   			background-color: #fff;
			opacity: 0;
   		}
    	
    	@media screen and (max-width: 768px){
    		.search-form{
    			width: 95%;
    			margin: 50px auto;
    		}
    	}
    	.content{
    		position: relative;
    		min-height: 300px;
    		background-color: #fff;
    	}
    	.content:before {
			position: absolute;
			top: -13px;
			left: 50%;
			display: inline-block;
			border-right: 13px solid transparent;
			border-bottom: 13px solid #ccc;
			border-left: 13px solid transparent;
			border-bottom-color: rgba(0, 0, 0, 0.3);
			content: '';
			z-index: 99;
		}
		.content:after {
			position: absolute;
			top: -12px;
			left: 50%;
			display: inline-block;
			border-right: 12px solid transparent;
			border-bottom: 12px solid #ffffff;
			border-left: 12px solid transparent;
			content: '';
			z-index: 99;
		}
    </style>
  	</head>

  	<body>
  	<div id="viewport">
	<div id="page">
  	<!-- header -->
		<jsp:include page = "head.jsp" flush="false"/>
  	<!-- end header -->
  	
    <!-- content -->
    <div class="search-wrap">
    	<div class="container">
    		<form>
	    	<div class="search-form">
				<input type="text" id="searchValue" name="searchValue" style="border:0; background-color: #fff; width: 90%;font-size:15px;" placeholder="무엇을 도와드릴까요?">
				<button type="submit" title="검색" style="border:0;background-color: #fff; position: absolute; right:15px;"><i class="fa fa-search" style="font-size: 1.4em; color: #989898;"></i></button>	
	    	</div>
	    	</form>
	    </div>
	</div><!-- end search-warp -->
	<div class="container content">
	
		<div style="width: 65%; float:right;">
			<div>계정만들기, 게시글작성하기</div>
			<hr style="margin:14px 0;">
			<div style="width: 100%;">
				<div style="float:left; width: 49.5%;">
					<p><strong>자주하는 질문</strong></p>
					<ul style="list-style: none; padding-left:0;">
						<li><a href="#">사진 올리는 방법은?</a></li>
						<li><a href="#">비밀번호를 변경하는 방법은?</a></li>
						<li><a href="#">댓글이나 게시글에서 사람을 태그하는 방법은?</a></li>
						<li><a href="#">댓글이나 게시글에서 사람을 태그하는 방법은?</a></li>
					</ul>
				</div>
				<div style="float:left; width: 49.5%;">
					<p><strong>1:1 문의하기</strong></p>
					<p>고객지원팀이 최선을 다해 도와드리겠습니다.</p>
					<button type="button" class="btn btn-default">문의하기</button>
				</div>
			</div>
		</div>
	</div>
    <!-- end content -->
 
	
	</div><!-- end page -->
	<%@ include file="commonScript.jsp" %>
	</div><!-- end viewport -->
	<script type="text/javascript">
	    $(function(){
	    	$("div.search-form").animate({"margin-top":"70px","opacity":"1"}, 800);
	    });
    </script>
  </body>
</html>